<template>
<div class="box">
    <div class="box-b">
        <header>
            <div class="icon">
                <i>  </i>
            </div>
            <h3 class="title">必抢清单</h3>
        </header>
        <div class="nav">
            <ul class="nav-list">
                <li @click="fn(0)">
                    <img src="https://image.suning.cn/uimg/MZMS/show/155117928298268957.png?from=mobile" alt="">
                    <p>精选</p>
                </li>
                <li @click="fn(1)">
                    <img src="//image.suning.cn/uimg/MZMS/show/155117929720977273.png?from=mobile" alt="">
                    <p>家电</p>
                </li>
                <li @click="fn(2)">
                    <img src="//image.suning.cn/uimg/MZMS/show/151384323374513944.png?from=mobile" alt="">
                    <p>酷机</p>
                </li>
                <li @click="fn(3)">
                    <img src="//image.suning.cn/uimg/MZMS/show/151375579188137688.png?from=mobile" alt="">
                    <p>超市</p>
                </li>
                <li @click="fn(4)">
                    <img src="//image.suning.cn/uimg/MZMS/show/151375580058931338.png?from=mobile" alt="">
                    <p>穿搭</p>
                </li>
                <li @click="fn(5)">
                    <img src="//image.suning.cn/uimg/MZMS/show/151383933612448185.png?from=mobile" alt="">
                    <p>置家</p>
                </li>
                <li @click="fn(6)">
                    <img src="//image.suning.cn/uimg/MZMS/show/151375578418753424.png?from=mobile" alt="">
                    <p>育儿</p>
                </li>
                <li @click="fn(7)">
                    <img src="//image.suning.cn/uimg/MZMS/show/155117928912031039.png?from=mobile" alt="">
                    <p>办公</p>
                </li>
                <li @click="fn(8)">
                    <img src="//image.suning.cn/uimg/MZMS/show/151669485755224183.png?from=mobile" alt="">
                    <p>运动</p>
                </li>
                <li @click="fn(9)">
                    <img src="//image.suning.cn/uimg/MZMS/show/151477707934186366.png?from=mobile" alt="">
                    <p>出行</p>
                </li>
            </ul>
        </div>
        <keep-alive>
            <component :is="mine"></component>
        </keep-alive>
    </div>
    
</div>
    
</template>
<script>
import Jingxuan from '../listbar/jingxuan.vue'
import Jiadian from '../listbar/jiadian.vue'
import Kuji from '../listbar/kuji.vue'
import Chaoshi from '../listbar/chaoshi.vue'
import Chuanda from '../listbar/chuanda.vue'
import Zhijia from '../listbar/zhijia.vue'
import Yver from '../listbar/yver.vue'
import Bangong from '../listbar/bangong.vue'
import Yundong from '../listbar/yundong.vue'
import Chuxing from '../listbar/chuxing.vue'
export default {
    name:"Inventory",
    data(){
        return{
            mine:"Jingxuan",
            arr1:["Jingxuan","Jiadian","Kuji","Chaoshi","Chuanda","Zhijia","Yver","Bangong","Yundong","Chuxing"]
        }
    },
    methods:{
        fn(index){
            this.mine = this.arr1[index]
        }
    },
    components:{
        Jingxuan,
        Jiadian,
        Kuji,
        Chaoshi,
        Chuanda,
        Zhijia,
        Yver,
        Bangong,
        Yundong,
        Chuxing
    },
}
</script>
<style scoped>

.box{
    width: 7.5rem;
    background: #f2f2f2;
}
.box-b{
    position: fixed;
    top: 0;
    left: 0;
}
header{
    height: .75rem;
    margin: 0 auto;
    background: #fff;
    line-height: .75rem;
    font-size: .6rem;
    border-bottom: 1px solid #dcdcdc;
    display: flex;
}
.icon i{
    width: .8rem;
    height: .8rem;
    line-height: .8rem;
}
.title{
    font-size: .3rem;
    color: rgb(255,45,25);
    margin-left: 50%;
    transform: translateX(-50%);
}
.nav{
    width: 7.5rem;
    height: 1.15rem;
    background: rgb(255,52,45);
    overflow: scroll;
}
.nav-list{
    width: 800px;
    height: 1.15rem;
    display: flex;
}
.nav-list li{
    width: 1.5rem;
    height:1.15rem;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}
.nav-list li img{
    width: .5rem;
    height: .5rem;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: .2rem;
}
.nav-list li p{
    font-weight: normal;
    height: auto;
    color: #fff;
    font-size: .18rem;
    margin-top: .05rem;
}

</style>